<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>手风琴案例</title>
  <script src="../jquery.js"></script>

  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    img {
      display: block;
    }

    ul {
      list-style: none;
    }

    .king {
      width: 1000px;
      /* width: 300px; */
      margin: 100px auto;
      background: url(images/bg.png) no-repeat;
      /* background-size: 300px 1000px; */
      overflow: hidden;
      padding: 10px;
    }

    .king ul {
      overflow: hidden;
    }

    .king li {
      position: relative;
      float: left;
      width: 69px;
      height: 69px;
      margin-right: 10px;
      /* margin-top: 10px; */
    }

    .king li.current {
      width: 224px;
    }

    .king li.current .big {
      display: block;
    }

    .king li.current .small {
      display: none;
    }

    .big {
      width: 224px;
      display: none;
    }

    .small {
      position: absolute;
      top: 0;
      left: 0;
      width: 69px;
      height: 69px;
      border-radius: 5px;
    }
  </style>

</head>

<body>
  <script type="text/javascript">
    $(function () {

      // 鼠标经过的两种操作

      $('.king li').mouseenter(
        function () {
          // a. 当前li标签宽度变为224px 同时小图片淡出 大图片淡入
          // 注意！因为children只能寻找亲儿子 find才能找到儿子以及孙子
          $(this).stop().animate({
            width: 224
          }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();

          // b. 其余兄弟li标签宽度变为69px，同时小图片淡入，大图片淡出
          $(this).siblings("li").stop().animate({
            width: 69
          }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
        }
      )

    });
  </script>
  <div class="king">
    <ul>
      <li class="current">
        <a href="#">
          <!--  -->
          <img src="images/m1.jpg" alt="" class="small">
          <img src="images/m.png" alt="" class="big">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="images/l1.jpg" alt="" class="small">
          <img src="images/l.png" alt="" class="big">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="images/c1.jpg" alt="" class="small">
          <img src="images/c.png" alt="" class="big">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="images/w1.jpg" alt="" class="small">
          <img src="images/w.png" alt="" class="big">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="images/z1.jpg" alt="" class="small">
          <img src="images/z.png" alt="" class="big">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="images/h1.jpg" alt="" class="small">
          <img src="images/h.png" alt="" class="big">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="images/t1.jpg" alt="" class="small">
          <img src="images/t.png" alt="" class="big">
        </a>
      </li>
    </ul>

  </div>




</body>

</html>